<template>
  <div class="iter" :style="imgStyle1">
    <div class="head">
      <el-page-header @back="goBack"></el-page-header>
      <div class="rowname">{{ rows.name }}</div>
      <div class="renwu">
        <li
          v-for="(name, index) in nav"
          :key="index"
          @click="haha(index)"
          :class="{ active: i == index }"
        >
          {{ name }}
        </li>
      </div>
    </div>
    <Plan v-show="i == 1" :rows="rows" />
    <Task v-show="i == 0" :rows="rows" />
    <Time v-show="i == 2" :rows="rows" />
  </div>
</template>

<script>
import "@/assets/css/StoryPoint.css";
import Plan from "./plan.vue";
import Task from "./task.vue";
import Time from "./Time.vue";
export default {
  name: "StoryPoint",
  components: { Plan, Task, Time },
  data() {
    return {
      imgStyle1: {
        backgroundImage: `url(${require("@/assets/images/bgc.png")})`,
      },
      isRouterAlive: true,
      rows: [],
      nav: ["任务版", "规划", "燃尽图"],
      components: 0,
      userStory: "",
      i: 0,
    };
  },
  provide() {
    return {
      reload1: this.reload1,
    };
  },
  methods: {
    goBack() {
      this.$router.push({
        name: "Items",
      });
    },
    haha(index) {
      this.i = index;
    },
    //局部刷洗
    reload1() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
  mounted() {
    //当前迭代的信息
    this.rows = JSON.parse(this.$route.query.row);
    //用户故事
    this.userStory = JSON.parse(this.$route.query.userStory);
  },
};
</script>

<style lang="less" scoped>
.active {
  color: rgb(0, 100, 255) !important;
  transition: all 0.5s;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 1.9em;
}
</style>